<template>
  <!-- 积分兑换 -->
  <div class="list">
    <div class="list-item" v-for="(item,index) in list">
      <div class="box-item">
        <el-card class="box-card">
          <el-row>
            <el-col :span="12">
              <div style="width: 216px; height: 148px;">
                <img :src="item.main_image" style="object-fit: cover;width: 100%;height: 100%;" />
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <el-row class="goods-info goods-title">{{item.title}}</el-row>
                <el-row class="goods-info">
                  <span>积分：</span>
                  <strong style="color: #F40">{{item.price}}</strong>
                </el-row>
                <el-row class="goods-info">
                  <span>已兑换：</span>
                  <strong style="color:#333">{{item.sales}}</strong>
                  <span>人</span>
                </el-row>
                <el-row class="goods-info">
                  <span>库存：</span>
                  <strong style="color:#333">{{item.quantity}}</strong>
                  <span>个</span>
                </el-row>
                <el-row class="goods-info">
                  <div class="btn" @click="showDialog(index)">立即兑换</div>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <!-- <el-dialog :visible.sync="true" width="30%">

    </el-dialog>-->
    <el-dialog
      v-if="currentGoodsIndex!=-1"
      :visible.sync="dialogVisible"
      width="45%"
      :show-close="false"
      top="30vh"
    >
      <!--  -->
      <el-row style="margin:15px 0;background-color:#f0f0f0">
        <el-col :span="4">
          <div style="width: 65px; height: 65px;">
            <img
              :src="list[currentGoodsIndex].main_image"
              style="object-fit: fill;width: 100%;height: 100%;"
            />
          </div>
        </el-col>
        <el-col :span="20">
          <div>
            <el-row class="goods-info goods-title">{{list[currentGoodsIndex].title}}</el-row>
            <el-row class="goods-info" type="flex" justify="space-between">
              <el-col :span="6">
                <span>积分：</span>
                <strong style="color: #F40">{{list[currentGoodsIndex].price}}</strong>
              </el-col>
              <el-col :span="7">
                <span>已兑换：</span>
                <strong style="color:#333">{{list[currentGoodsIndex].sales}}</strong>
                <span>人</span>
              </el-col>
              <el-col :span="5">
                <span>库存：</span>
                <strong style="color:#333">{{list[currentGoodsIndex].quantity}}</strong>
                <span>个</span>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <!--  -->
      <el-row style="margin:15px 0;">
        <el-col :span="12">
          <span style="height:36px;line-height:36px;font-size:16px;">购买数量</span>
        </el-col>
        <el-col :span="12">
          <el-input-number style="float:right;width:100px;" size="small" v-model="num"></el-input-number>
        </el-col>
      </el-row>
      <!--  -->
      <el-row style="margin:15px 0;">
        <el-col :span="4">
          <span style="height:36px;line-height:36px;font-size:16px;">收货地址</span>
        </el-col>
        <el-col :span="20">
          <el-select v-model="address" placeholder="请选择收货地址" style="width:100%;">
            <el-option
              v-for="item in addressList"
              :key="item.uuid"
              :label="item.address"
              :value="item.uuid"
            >
              <span style="float: left;width:50px;color:#144970;">{{ item.name }}</span>
              <span style="margin-left:3px;color:#7e5f3a">{{ item.address }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.tel }}</span>
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <!--  -->
      <el-row style="margin:15px 0;padding:15px 0;">
        <el-col :span="12">
          <div style="height:36px;line-height:36px;font-size:16px;">
            <span>实付积分：</span>
            <span style="font-size:18px;color:#ff4603">{{list[currentGoodsIndex].price*num}}</span>
            <span style="margin-left:2px;font-size:15px;color:#1c691c">免运费</span>
          </div>
        </el-col>
        <el-col :span="12">
          <el-button
            type="danger"
            style="float:right;"
            round
            size="small"
            @click.native="handleBuy()"
          >立 即 购 买</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "integral_exchange",
  data() {
    return {
      currentGoodsIndex: -1,
      dialogVisible: false,
      list: [],
      num: 1,
      address: "",
      addressList: [],
      cities: [
        {
          value: "Beijing",
          label: "北京"
        },
        {
          value: "Shanghai",
          label: "上海"
        },
        {
          value: "Nanjing",
          label: "南京"
        },
        {
          value: "Chengdu",
          label: "成都"
        },
        {
          value: "Shenzhen",
          label: "深圳"
        },
        {
          value: "Guangzhou",
          label: "广州"
        }
      ]
    };
  },
  methods: {
    showDialog(index) {
      this.currentGoodsIndex = index;
      this.dialogVisible = true;
    },
    handleBuy() {
      if (this.address == "") {
        this.$message.error("请选择收货地址");
        return;
      }

      if (this.num <= 0) {
        this.$message.error("购买数量不能小于等于0");
        return;
      }
      this.$http
        .post("/goods/buy", {
          address_id: this.address,
          goods_id: this.list[this.currentGoodsIndex].goods_id,
          quantity: this.num
        })
        .then(res => {
          this.dialogVisible = false;
          this.$message({
            message: res.msg,
            type: "success"
          });
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    }
  },
  mounted() {
    this.$http
      .post("/goods/list", {})
      .then(res => {
        this.list = res.data.list;
      })
      .catch(err => {
        this.$message.error(err.msg);
      });
    this.$http
      .post("/user/getaddress", {})
      .then(res => {
        this.addressList = res.data;
      })
      .catch(err => {
        this.$message.error(err.msg);
      });
  }
};
</script>
<style scoped>
.list {
  position: relative;
  width: 100%;
  line-height: 1;
  overflow: hidden;
}

.list-item {
  position: relative;
  width: 50%;
  vertical-align: top;
  display: inline-block;
}
.box-item {
  margin: 10px;
}
.box-card {
  width: 100%;
  color: #868686;
}
.goods-info {
  margin: 10px 0;
}
.goods-title {
  display: block;
  width: 100%;
  height: 18px;
  margin-bottom: 6px;
  line-height: 18px;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
.btn {
  cursor: pointer;
  text-align: center;
  width: 90px;
  height: 24px;
  line-height: 24px;
  background-position: 0 -118px;
  display: inline-block;
  color: #ff6600;
  border: #ff6600 solid 1px;
  border-radius: 3px;
}

.btn:hover {
  color: #fff;
  background-color: #ff6600;
  border: #ff6600 solid 1px;
}
.btn:active {
  color: #fff;
  background-color: #fc9048;
  border: #fc9048 solid 1px;
}
</style>


